
const path = require('path')

// 引入plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 引入css的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const CssMinimizerplugin = require('css-minimizer-webpack-plugin');





const config = {
    // 开发模式
    mode: 'development',

    // 入口
    entry: {
        admin_login: './src/manage/js/login.js',
        admin_reg: './src/manage/js/admin_reg.js',
        admin_index: './src/manage/js/index.js'
    },

    // 出口
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name]_[hash].js',
        clean: true,
    },

    // 插件
    plugins: [
        new HtmlWebpackPlugin({
            // 模板地址
            template: './src/manage/login.html',
            filename: 'manage/login.html',
            chunks: ['admin_login']
        }),
        new HtmlWebpackPlugin({
            // 模板地址
            template: './src/manage/admin_reg.html',
            filename: 'manage/admin_reg.html',
            chunks: ['admin_reg']
        }),
        new HtmlWebpackPlugin({
            // 模板地址首页
            template: './src/manage/index.html',
            filename: 'manage/index.html',
            chunks: ['admin_index']
        }),


        // css插件
        new MiniCssExtractPlugin({
            // 路径及文件名
            filename: 'css/[name]_[hash].css'
        })

    ],

    // 规则
    module: {
        // css模块
        rules: [{
            test: /\.css$/,
            use: [MiniCssExtractPlugin.loader, 'css-loader']
        },
        // 图片
        {
            test: /\.(bmp|png|jpg|jpeg|gif)$/,
            type: 'asset',
            generator: {
                filename: 'images/[contenthash][ext]'
            }
        },
        // 其他规则
        {
            test: /\.htm$/,
            type: 'asset/source'
        },
        {
            test: /\.tmp$/,
            type: 'asset/source'
        },
        //字体文件
        {
            test: /\.(ttf|woff|woff2)/,
            type: 'asset/resource',
            generator: {
                filename: 'fonts/[id][ext]'
            }
        }

        ]

    },
    // css压缩优化
    optimization: {
        minimizer: [
            new CssMinimizerplugin(),
            '...'
        ],

    },

    // 热更新
    devServer: {
        // 端口号
        port: 80,
        hot: true,
        open: {
            target: ['/manage/login.html', './manage/admin_reg.html']
        },
        // 监控文件
        watchFiles: ['./src/manage/login.html', './src/manage/admin_reg.html', './src/manage/index.html'],
        static: {
            // 设置服务器根目录
            directory: path.join(__dirname, 'dist')
        },
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:3000',
                // pathrewrite: {},
                changeOrigin: true

            }
        }

    }




}

module.exports = config